<template>
	<view class="mcsd">
		<view class="mcsdList">
			<view class="mcsdLi" v-for="(item, index) of list" :key="index">
				<view class="mcsdListHead" @click="cli_li(item, index)">
					<text class="font_blod">{{item.agent_person}}</text>
					<image v-if="item.show" class="mcsdListHeadImg mcsdListHeadImgTop" src="../../../static/manufacturers/btm.png" mode=""></image>
					<image v-else class="mcsdListHeadImg" src="../../../static/manufacturers/btm.png" mode=""></image>
				</view>
				<view class="mcsdListMain" v-if="item.show == true">
					<view class="mcsdListMainLi" v-for="(ite, ind) of item.lis" :key="ind">
						<view class="mcsdListMainLi-time">
							{{ite.create_time}}
						</view>
						<view class="mcsdListMainLi-box" v-for="(i, s) of ite.relList" :key="s">
							<view class="mcsdListMainLi-box-left">
								<image class="mcsdListMainLi-box-left-img" :src=i.attribute_logo mode=""></image>
							</view>
							<view class="mcsdListMainLi-box-right">
								<view class="mcsdListMainLi-box-right-title font_blod">
									{{i.attribute_name}}
								</view>
								<view class="mcsdListMainLi-box-right-by">
									<text class="mcsdListMainLi-box-right-by-box" v-if="i.is_post == 1">包邮 偏远地区补差价</text>
									<text class="baoyou-no" v-else>不包邮</text>
								</view>
								<view class="mcsdListMainLi-box-right-btm">
									<view class="mcsdListMainLi-box-right-btm-box">
										<text class="mcsdListMainLi-box-right-btm-box-txt1">发货数量:</text>
										<text class="mcsdListMainLi-box-right-btm-box-txt2 font_blod"></text>
										<text class="mcsdListMainLi-box-right-btm-box-txt3 font_blod">{{i.order_sell_count}}</text>
										<text class="mcsdListMainLi-box-right-btm-box-txt4">{{i.parts_unit}}</text>
									</view>
									<view class="mcsdListMainLi-box-right-btm-box">
										<text class="mcsdListMainLi-box-right-btm-box-txt1">单价</text>
										<text class="mcsdListMainLi-box-right-btm-box-txt2 font_blod">￥</text>
										<text class="mcsdListMainLi-box-right-btm-box-txt3 font_blod">{{i.order_sell_price}}</text>
										<text class="mcsdListMainLi-box-right-btm-box-txt4">/{{i.parts_unit}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import allapi from '../api/index.js'
	export default {
		data() {
			return {
				factoryId: uni.getStorageSync('id_factory'),
				startDate: '',
				endDate: '',
				partsId: '',
				list: []
			}
		},
		onLoad(val) {
			this.partsId = val.id
			this.startDate = val.startDate
			this.endDate = val.endDate
		},
		mounted() {
			// 获取销售额 单个商品对应的管理商
			this.getFactorySalesVolumeAgent()
		},
		methods: {
			// 点击名称列表
			cli_li (item, index) {
				let agent_id = item.agent_id
				if (item.show) {
					item.show = false
				}else {
					this.getFactorySalesVolumeOrderRel(agent_id, index)
				}
			},
			// 获取销售额 单个商品，单个管理商对应的订单详情
			getFactorySalesVolumeOrderRel (agentId, index) {
				uni.request({
					url: allapi.getFactorySalesVolumeOrderRel,
					data: {
						factoryId: this.factoryId,
						startDate: this.startDate,
						endDate: this.endDate,
						partsId: this.partsId,
						agentId: agentId
					},
					success: (res) => {
						console.log(666,res);
						let dat = res.data.data
						this.list[index].lis = dat
						this.list[index].show = true
					}
				})
			},
			// 获取销售额 单个商品对应的管理商
			getFactorySalesVolumeAgent () {
				console.log(22222222);
				uni.request({
					url: allapi.getFactorySalesVolumeAgent,
					data: {
						factoryId: this.factoryId,
						startDate: this.startDate,
						endDate: this.endDate,
						partsId: this.partsId
					},
					success: (res) => {
						console.log(res);
						let list = res.data.data.list
						let lists = []
						list.map( e => {
							lists.push(
								Object.assign(e, {
									show: false
								})
							)
						})
						console.log(lists);
						this.list = lists
					}
				})
			}
		}
	}
</script>

<style scoped>
	.mcsd {
		
	}
	.mcsdList {
		
		border-radius: 24rpx;
		margin: 0 24rpx;
	}
	.mcsdLi {
		margin-top: 24rpx;
		background: #E9EEF1;
		border-radius: 24rpx;
	}
	.mcsdListHead {
		padding: 32rpx 24rpx;
		color: #333333;
		font-size: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 44rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
	}
	.mcsdListHeadImg {
		width: 36rpx;
		height: 36rpx;
	}
	.mcsdListHeadImgTop {
		transform: rotate(180deg);
	}
	.mcsdListMain {
		background-color: #E9EEF1;
	}
	.mcsdListMainLi {
		margin: 24rpx;
		border-bottom: 1rpx solid #ccc;
		padding-bottom: 24rpx;
	}
	.mcsdListMainLi:last-child {
		border-bottom: none;
	}
	.mcsdListMainLi-time {
		font-size: 28rpx;
		color: #666666;
		font-weight: 400;
	}
	.mcsdListMainLi-box {
		margin-top: 24rpx;
		display: flex;
	}
	.mcsdListMainLi-box-left-img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
		background: #EEEEEE;
	}
	.mcsdListMainLi-box-right {
		flex: 1;
		margin-left: 24rpx;
	}
	.mcsdListMainLi-box-right-title {
		font-size: 28rpx;
		color: #333333;
	}
	.mcsdListMainLi-box-right-by {
		height: 36rpx;
		margin-top: 16rpx;
	}
	.mcsdListMainLi-box-right-by-box {
		padding: 0 12rpx;
		border: 2rpx solid #28CD50;
		font-size: 24rpx;
		font-weight: 400;
		color: #28CD50;
		line-height: 34rpx;
		border-radius: 6rpx;
	}
	.mcsdListMainLi-box-right-btm {
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.mcsdListMainLi-box-right-btm-box {
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		display: flex;
		align-items: center;
	}
	.mcsdListMainLi-box-right-btm-box-txt1 {
		margin-right: 8rpx;
	}
	.mcsdListMainLi-box-right-btm-box-txt2 {
		font-size: 24rpx;
		color: #333333;
	}
	.mcsdListMainLi-box-right-btm-box-txt3 {
		font-size: 32rpx;
		color: #333333;
		margin-right: 8rpx;
	}
</style>
